﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../_scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <style type="text/css">
        #imga
        {
            width: 100px;
            height: 100px;
            border: 1px solid gray;
            margin-left: 200px;
            position: relative;
        }
        
        #imgb
        {
            width: 300px;
            height: 300px;
            border: 1px solid gray;
            position: relative;
        }
        .pointerX
        {
            width: 5px;
            height: 5px;
            background-color: Red;
            position: absolute;
            left: 0;
            top: 0;
        }
        .pointerY
        {
            width: 5px;
            height: 5px;
            background-color: blue;
            position: absolute;
            left: 0;
            top: 0;
        }
        #diva
        {
            width: 300px;
            height: 300px;
            border: 1px solid gray;
            position: relative;
        }
        #divb
        {
            width: 100px;
            height: 100px;
            border: 1px solid gray;
            position: absolute;
        }
        
        #div2a
        {
            width: 300px;
            height: 300px;
            border: 1px solid gray;
            position: relative;
        }
        #div2b
        {
            width: 100px;
            height: 100px;
            border: 1px solid gray;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="pointerX">
    </div>
    <div class="pointerY">
    </div>
    <hr />
    <div id="imga">
    </div>
    <div id="imgb">
    </div>
    <script type="text/javascript">

        $(function () {
            $zoom = $('#imgb');
            $('.pointerX').appendTo($zoom);
            $('.pointerY').appendTo($zoom);
            $('#imga').mousemove(function (e) {


                // x-------
                xratio = $zoom.outerWidth() / $(this).outerWidth();
                imga_left = e.pageX - $(this).offset().left;
                imgb_left = (imga_left * xratio)
                $('.pointerX').css('left', imgb_left);

                // y---------
                yratio = $zoom.outerHeight() / $(this).outerHeight();
                imga_top = e.pageY - $(this).offset().top;
                imgb_top = (imga_top * yratio)
                $('.pointerY').css('top', imgb_top);
            });
        });
    </script>
    <hr />
    <div id="diva">
        <div id="divb">
        </div>
    </div>
    <script type="text/javascript">

        $(function () {
            $zoomdiv = $('#divb');
            $('.pointerX').clone().appendTo($('#diva'));
            $('.pointerY').clone().appendTo($('#diva'));

            $('#diva').mousemove(function (e) {
                // x-------
                xratio = ($(this).outerWidth() - $zoomdiv.outerWidth()) / $(this).outerWidth();
                pos_left = e.pageX - $(this).offset().left;
                zoom_left = (pos_left * xratio)
                $('.pointerX').css('left', zoom_left);

                // y---------
                yratio = ($(this).outerHeight() - $zoomdiv.outerHeight()) / $(this).outerHeight();
                pos_top = e.pageY - $(this).offset().top;
                zoom_top = (pos_top * yratio);
                $('.pointerY').css('top', zoom_top);


                // divb postion
                $zoomdiv.css({ top: zoom_top, left: zoom_left });

            });
        });
    </script>
    <hr />
    <style type="text/css">
        .small
        {
            width: 100px;
            height: 100px;
            border: 1px solid gray;
            margin: 100px auto;
        }
        .big
        {
            width: 300px;
            height: 300px;
            border: 1px solid gray;
            position: relative;
            background-color: #999;
        }
        
        .container
        {
            width: 350px;
            height: 350px;
            border: 1px solid gray;
        }
    </style>
    <div class="container">
        <div class="small">
            <div class="big">
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('.small').mousemove(function (e) {
                xRatio = ($('.big').outerWidth() - $(this).outerWidth()) / $(this).outerWidth();
                small_left = e.pageX - $(this).offset().left;
                big_left = small_left * -xRatio;

                yRatio = ($('.big').outerHeight() - $(this).outerHeight()) / $(this).outerHeight();
                small_top = e.pageY - $(this).offset().top;
                big_top = small_top * -yRatio;

                $('.big').css({ top: big_top, left: big_left, opacity: 0.3 });
            });
        });
    </script>
</body>
</html>
